<template>
	<view class="content">
		<view class="infoitem infopic">
			<text>头像</text>
			<image src="../../../static/moren.png" mode="" v-if="info.avatar ==''"></image>
			<image :src="avatar" mode="" @click="upimg()" v-else></image>
		</view>
		<view class="infoitem infoname">
			<text>用户名</text>
			<!-- <text>{{info.nickname}}</text> -->
			<input type="text" value="" v-model="nickname" />
			</view>
		<view class="infoitem infosex"><text>性别</text>
		<!-- <text v-if="info.gender == 0">女</text>
		<text v-else>男</text> -->
			<view class="xuanze">
				<xfl-select
					:list="tabTitle"
					:clearable="false"
					:showItemNum="2"
					:listShow="false"
					:isCanInput="false"
					:style_Container="listBoxStyle"
					:placeholder="'placeholder'"
					:initValue="sex"
					:selectHideType="'independent'"
					@change="change"
				></xfl-select>
			</view>
		</view>
		<view class="infoitem infopsw" @click="gaibian()">
			<text>修改密码</text>
			<text class="psw iconfont icon-fenye-xiayiye"></text>
		</view>
		<view class="save" @click="ok()">保存信息</view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
import xflSelect from '@/components/xfl-select/xfl-select.vue';
	export default {	
		data() {
			return {
				info:'',
				nickname:'',//名字
				sex:'',//性别
				url:'../../../static/yaoqing.png',
				avatar:'',
				listBoxStyle: `height: 40px; font-size: 24rpx;`,
				tabTitle: ['女','男'],
				gender:'',//性别0 1
				items: [{
						value: '0',
						name: '女'
					},
					{
						value: '1',
						name: '男'
					}
				],
				current: 0
			}
		},
		onLoad() {
			var _this = this
			this.userinfo()	
			var gender1 = uni.getStorageSync('gender1')
			//从本地拿到性别渲染上去，因为在这个时候AJAX用户信息拿的慢，渲染不上去
			_this.gender = gender1
			if(gender1 == 0){
				_this.sex = '女'
			}else{
				_this.sex = '男'
			}
		},
		methods: {
			ok(){
				//保存信息
				var _this = this
				var token = uni.getStorageSync('token')
				var data = {
					avatar: _this.avatar,
					gender: _this.gender,
					nickname: _this.nickname,
				}
				uni.showLoading({
				    title: '保存中'
				});
				uni.request({
					url: getdata.websiteUrl + '/user/update_info',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					data:data,
					success: res => {
						console.log(res)
						uni.hideLoading();
						if(res.data.code == 1){
							getdata.shou(res.data.msg)
							setTimeout(function(){
								uni.navigateBack(); 
							},1500)
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			change({ newVal, oldVal, index, orignItem }) {
				this.gender = index
			 },
			upimg(){
				//上传头像
				var _this = this
				var token = uni.getStorageSync('token')
				console.log(token)
				uni.chooseImage({
					count: 1, //默认9
					success: function (res) {
						console.log(res,222)
						console.log(res.tempFilePaths[0],222)
						uni.showLoading({
						    title: '上传中'
						});
					uni.uploadFile({
						url: getdata.websiteUrl+'/common/upload', 
						header:{'content-type': "application/x-www-form-urlencoded",token:token},
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (res1) => {
							uni.hideLoading({
								title: '上传成功'
							});
							console.log(res1,'res1')
							_this.avatar = JSON.parse(res1.data).data.fullurl
						},
						fail: (res2) =>{
							uni.hideLoading();
							getdata.shou('服务器断开链接')
						}
					});
					}
				});
			},
			userinfo(){
				//获取用户信息
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_this.info = res.data.data
							_this.nickname = res.data.data.nickname//昵称
							_this.avatar = res.data.data.avatar//头像
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			gaibian(){
				uni.navigateTo({
				    url: '../changepassword/changepassword'
				});
			}
		}
	}
</script>

<style lang="scss">
@import '../../../static/iconfont/iconfont.css';	
.content{
box-sizing: border-box;
padding: 0 30rpx;	
}
.infoitem{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;

	border-bottom: 2rpx solid #F0F0F0;
	image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;

	}
	input{
		font-size: 24rpx;
		text-align: right;
		color: #333333;
	}
}
.infopic{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #121212;
}
.infoname{
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #333333;
	box-sizing: border-box;
	padding-left:12rpx ;
	padding-right: 20rpx;
}
.infosex{
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #666666;
	box-sizing: border-box;
	padding-left:12rpx ;
	padding-right: 20rpx;
}
.infopsw{
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #000000;
	box-sizing: border-box;
	padding-left:12rpx ;
	padding-right: 20rpx;
	
}
.save{
	width: 300rpx;
	height: 89rpx;
	line-height: 89rpx;
	background: #1578F2;
	border-radius: 45rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	position: fixed;
	bottom:150rpx;
	left:225rpx;
}
.xuanze {
	width:120rpx;
	height: 70rpx;
	// background: #F4F5F7;
	font-weight: normal;
	
	.show-box{
		border: none !important;
		// background: #F4F5F7 !important;
		width: 120rpx !important;
		height: 70rpx !important;
	}
}
</style>
